<template>
	<view class="content">
		<view class="page-area">
			<view class="slide">
				<view class="item" v-for="(item,index) in slideList" :key="item.id" :class="{active:actives == item.id}" @click="handleTabLeft(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="page_right">
				<view class="list">
					<view class="item" v-for="(item,index) in cateList" :key="item.name" @click="handleToList(item.id,item.type,index)">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actives:1,
				cateList:[],
				slideList:[],
				share:false
			}
		},
		onLoad(option) {
			if(option.storeId){
				uni.setStorageSync('storeId',option.storeId)
				this.share = true
				uni.setNavigationBarTitle({
					title:"全部商品"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"商品管理"
				})
			}
			this.getList()
		},
		methods: {
			handleTabLeft(id){
				this.$http({
					url:`/home/productCateList/${id}`,
					method:"get"
				}).then(data=>{ 
					this.actives = id
					this.cateList = data
				})
			},
			getList(){
				this.$http({
					url:"/product/categoryTreeList",
					method:"get"
				}).then(data=>{
					this.slideList = data
					this.actives = data[0].id
					this.cateList = data[0].children
				})
			},
			handleToList(id,type,index){
				if(this.share){
					uni.navigateTo({
						url:`./shareList?id=${id}&type=${type}&parentId=${this.actives}&index=${index}`
					})
				}else{
					uni.navigateTo({
						url:`./list?id=${id}&type=${type}&parentId=${this.actives}&index=${index}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-area{
		background: #fff; 
		display: flex;
		overflow: hidden;
		.page_right{
			flex: 1;
			padding-right: 20rpx;
			margin-left: 16rpx;
			.list{
				margin-top: 40rpx;
				.item{
					display: flex;
					height: 109rpx;
					border-bottom: 1px solid #E8E8E8;
					align-items: center;
					text{
						font-size: 28rpx;
						color: #1C1C1C;
						margin-left: 56rpx;
					}
					::v-deep .u-icon{
						margin-left: auto;
					}
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
			.category_img{
				.img1{
					image{
						display: block;
						width: 100%;
						height: 290rpx;
					}
				}
				.img2{
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 256rpx;
						height: 142rpx;
					}
				}
			}
		}
		.slide{
			width: 190rpx;
			background: #F4F4F4;
			height: 100vh;
			overflow-y: auto;
			.item{
				text-align: center;
				font-size: 24rpx;
				color: #999;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 20rpx;
				&.active{
					background: #fff;
					color: #191919;
					position: relative;
					&::after{
						content: "";
						width: 6rpx;
						height: 100%;
						background: #191919;
						position: absolute;
						left: 0;
						top: 0; 
						margin: auto;
					}
				}
			}
		}
	}
</style>
